let _Vue = null

/**
 * 模拟实现的VueRouter
 */
export default class MyVueRouter {
  /**
     * 构造MyVueRouter对象
     *
     * @param routes 路由信息
     */
  constructor (routes) {
    this.routeMap = new Map()

    routes.forEach(route => {
      this.routeMap.set(route.path, route.component)
    })
  }

  /**
     * 创建路由相关的组件
     */
  initComponents () {
    _Vue.component('router-link', {
      props: {
        to: String
      },
      render (h) {
        return h('a', {
          attrs: {
            href: '#' + this.to
          }
        }, [this.$slots.default])
      }
    })

    const self = this
    _Vue.component('router-view', {
      render (h) {
        const component = self.routeMap.get(self.data.currentRoute)
        console.log('ok')
        return h(component)
      }
    })
  }

  /**
     * 监听hashchange事件
     */
  initEvents () {
    window.addEventListener('hashchange', () => {
      this.data.currentRoute = window.location.hash.substr(1) || '/'
    })
  }

  /**
     * 初始化MyVueRouter
     */
  init () {
    this.data = _Vue.observable({
      currentRoute: '/'
    })

    // 创建A标签对应的组件和标识路由组件位置的组件
    this.initComponents()

    // 监听hashchange事件
    this.initEvents()
  }

  /**
     * 安装插件
     *
     * @param Vue Vue构造函数
     */
  static install (Vue) {
    if (MyVueRouter.install.installed) {
      return
    }

    MyVueRouter.install.installed = true
    _Vue = Vue

    // 利用mixin把路由对象添加到Vue实例
    Vue.mixin({
      beforeCreate () {
        if (this.$options.router) {
          Vue.prototype.router = this.$options.router
          this.$options.router.init()
        }
      }
    })
  }
}
